<template>
  <div class="body-content">
    <div class="email-body">
      <el-form
          ref="formDataRef"
          :model="formData"
          :rules="formValidRules"
          style="width:100%"
          label-position="top">
        <el-row :gutter="10">

          <el-col :span="24">
            <el-form-item label="邮箱类型" prop="host"
                          :rules="[
        {
          required: true,
          message: '请选择邮箱类型',
          trigger: 'change',
        }]">
              <FormDictSelect v-model:value="formData.host" dictType="email_host" :disabled="readOnly"/>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="邮箱端口" prop="port" :rules="[
        {
          required: true,
          message: '请输入邮箱端口',
          trigger: 'change',
        }]">
              <el-input v-model="formData.port" :disabled="true"/>
            </el-form-item>
          </el-col>


          <el-col :span="24">
            <el-form-item label="发件邮箱" prop="username"
                          :rules="[
        {
          required: true,
          message: '请输入发件邮箱',
          trigger: 'change',
        },  {
          type: 'email',
          message: '请输入正确的邮箱格式',
          trigger: ['blur', 'change'],
        }]">
              <el-input v-model="formData.username" :disabled="readOnly"/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="授权码" prop="password"
                          :rules="[
        {
          required: true,
          message: '请输入授权码',
          trigger: 'change',
        }]">
              <el-input v-model="formData.password" :disabled="readOnly"/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <div style="width:100%;">
              <el-button type="primary" round style="width:100%" v-if="readOnly"
                         @click="edit">编辑
              </el-button>
              <el-button type="primary" round style="width:100%"
                         @click="save"
                         v-else>保存
              </el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>

  </div>
</template>

<script lang="ts" setup>
// @ts-ignore
import {getCurrentInstance, onMounted, reactive, ref, watch} from 'vue'
// @ts-ignore
import {ElMessage, FormInstance, FormRules} from 'element-plus'

//接收的参数
const props = defineProps({
  params: {required: false, type: Object, default: {}},
});

interface Modal {
  id?: string,
  username?: string,
  password?: string,
  host?: string,
  port?: number
}

const readOnly = ref<Boolean>(true);

const formDataRef = ref<FormInstance>()

// @ts-ignore
const {proxy} = getCurrentInstance()

// 表单 数据
let formData = ref<Modal>({})

// 表单 验证
let formValidRules = reactive<FormRules>({});
let portMap = new Map();

onMounted(() => {
  requestData();
  portMap.set("smtp.163.com", 25);
  portMap.set("hqs.mail.chinaunicom.cn", 465);
  portMap.set("smtp.qq.com", 587);
})

const requestData = () => {
  proxy.$http.post("/user-center/email/findOne", {id: 1}).then((api: any) => {
    if (api.data) {
      formData.value = api.data;
    }
  });
}

const edit = () => {
  readOnly.value = false;
}

const save = () => {
  formDataRef.value?.validate((valid: any, fields: any) => {
    if (valid) {
      readOnly.value = true;

      proxy.$http.post('/user-center/email/save', formData.value).then((api: any) => {
        if (api.success) {
          ElMessage.success('操作成功')
        } else {
          ElMessage.error('操作异常')
        }
      });
    }
  })
}

//监听变化
watch(() => formData.value.host, () => {
  formData.value.port = portMap.get(formData.value.host);
})
</script>